<template>
  <div class="app-container">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span class="title">订单详情</span>
          <el-button @click="goBack">返回</el-button>
        </div>
      </template>

      <el-tabs v-model="activeTab">
        <el-tab-pane label="基本信息" name="basic">
          <el-descriptions :column="2" border>
            <el-descriptions-item label="订单编号">
              {{ order.orderCode }}
            </el-descriptions-item>
            <el-descriptions-item label="项目名称">
              {{ order.projectName }}
            </el-descriptions-item>
            <el-descriptions-item label="供应商名称">
              {{ order.supplierName }}
            </el-descriptions-item>
            <el-descriptions-item label="开始日期">
              {{ order.startDate }}
            </el-descriptions-item>
            <el-descriptions-item label="结束日期">
              {{ order.endDate }}
            </el-descriptions-item>
            <el-descriptions-item label="结算周期">
              {{ order.settlementCycleName }}
            </el-descriptions-item>
            <el-descriptions-item label="订单金额">
              {{ formatAmount(order.totalAmount) }}
            </el-descriptions-item>
            <el-descriptions-item label="状态">
              <el-tag :type="getStatusType(order.status)">{{ order.statusName }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="创建时间">
              {{ order.createTime }}
            </el-descriptions-item>
            <el-descriptions-item label="更新时间">
              {{ order.updateTime }}
            </el-descriptions-item>
            <el-descriptions-item label="备注" :span="2">
              {{ order.remark || "无" }}
            </el-descriptions-item>
          </el-descriptions>
        </el-tab-pane>

        <el-tab-pane label="关联人员" name="personnel">
          <order-personnel-table v-if="order.orderId" :order-id="order.orderId" />
        </el-tab-pane>

        <el-tab-pane label="结算记录" name="settlement" lazy>
          <div class="empty-tab">
            <el-empty description="暂无结算记录" />
          </div>
        </el-tab-pane>

        <el-tab-pane label="验收记录" name="acceptance" lazy>
          <div class="empty-tab">
            <el-empty description="暂无验收记录" />
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { getOrder } from "@/api/attendance/order"; // 假设有这个API
import OrderPersonnelTable from "./components/OrderPersonnelTable.vue";

export default defineComponent({
  name: "OrderDetail",
  components: {
    OrderPersonnelTable
  },
  setup() {
    const route = useRoute();
    const router = useRouter();
    const activeTab = ref("basic");
    const order = ref<any>({}); // 使用any暂时替代具体类型

    // 获取状态标签类型
    const getStatusType = (status: string): "success" | "warning" | "info" | "danger" => {
      const map: Record<string, "success" | "warning" | "info" | "danger"> = {
        "0": "info", // 进行中
        "1": "success", // 已完成
        "2": "danger" // 已取消
      };
      return map[status] || "info";
    };

    // 金额格式化
    const formatAmount = (amount: number | undefined) => {
      if (amount === undefined) return "0.00";
      return amount.toFixed(2) + " 元";
    };

    // 返回上一页
    const goBack = () => {
      router.back();
    };

    // 获取订单详情
    const loadOrderDetail = async () => {
      try {
        const orderId = route.params.id;
        const res = await getOrder(orderId);
        order.value = res.data;
      } catch (error) {
        console.error("获取订单详情失败", error);
      }
    };

    onMounted(() => {
      loadOrderDetail();
    });

    return {
      order,
      activeTab,
      getStatusType,
      formatAmount,
      goBack
    };
  }
});
</script>

<style lang="scss" scoped>
.app-container {
  padding: 0px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .title {
    font-size: 18px;
    font-weight: bold;
  }
}

.empty-tab {
  padding: 40px 0;
}
</style>
